<template>
  <div class="map-container" id="container" ref="content"></div>
</template>

<script>
import * as THREE from "three";
import {
  OrbitControls,
  MapControls,
} from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
let renderer, camera, scene, mesh;
export default {
  name: "MapLoca",
  data() {
    return {};
  },
  mounted() {
    var loader = new GLTFLoader(); //创建一个GLTF加载器
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({ alpha: true });
    var k = 500 / 200; //窗口宽高比
    var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
      // console.log(camera.position)
    }
    render();

    function onWindowResize() {
      var width = 0; //窗口宽度
      var height = 0; //窗口高度
      if (
        document.getElementById("container") &&
        document.getElementById("container").offsetWidth
      ) {
        width = document.getElementById("container").offsetWidth;
      }
      if (
        document.getElementById("container") &&
        document.getElementById("container").offsetHeight
      ) {
        height = document.getElementById("container").offsetHeight;
      }
      var k = width / height; //窗口宽高比
      var s = 350; //三维场景显示范围控制系数，系数越大，显示的范围越大

      /**
       * 创建渲染器对象
       */
      //   addEventListener("click", that.handlechoose); // 监听窗口鼠标单击事件
      document.querySelector("#container").appendChild(renderer.domElement);
      //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性


      camera = new THREE.PerspectiveCamera(
        65,
        window.innerWidth / window.innerHeight,
        2,
        10000
      );
      camera.position.set(400, 250, 800); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象，默认坐标原点)
      controls = new MapControls(camera, renderer.domElement);

      controls.addEventListener("change", function () {
        // 鼠标左键拖动的时候，target的位置会变化
        // console.log(controls.target);
      });

      // 缩放范围限制
      //透视投影相机：相机距离目标观察点距离越远显示越小，距离越近显示越大
      //相机距离观察目标点极小距离——模型最大状态
      controls.minDistance = 300;
      //相机距离观察目标点极大距离——模型最小状态
      controls.maxDistance = 2500;

      // 上下旋转范围
      controls.minPolarAngle = 0;
      controls.maxPolarAngle = Math.PI / 2;
      // controls.maxPolarAngle = Math.PI;
      // 左右旋转范围
      controls.minAzimuthAngle = -Math.PI * (100 / 180);
      controls.maxAzimuthAngle = Math.PI * (100 / 180);
    }
    var controls = new OrbitControls(camera, renderer.domElement);
    loader.load("/src/utils/Duck.gltf", function (gltf) {
      console.log("控制台查看加载gltf文件返回的对象结构", gltf);
      // console.log('gltf对象场景属性', gltf.scene)
      // console.log('gltf对象相机属性', gltf.cameras)
      // 返回的场景对象gltf.scene插入到threejs场景中
      scene.add(gltf.scene);
      gltf.scene.scale.set(50, 50, 50); //整体缩放
      // 控制台查看mesh的材质和几何体信息
      gltf.scene.children.forEach(function (mesh) {
        console.log(mesh);
      });
    });
    this.init();
    onWindowResize();
    window.addEventListener("resize", onWindowResize, false);

    window.addEventListener(
      "resize",
      function () {
        if (renderer) {
          renderer.setSize(window.innerWidth, window.innerHeight);
          // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        }

      },
      false
    );
  },
  methods: {
    // 初始化
    init() {
      // 初始化容器
      var content = this.$refs.content;
      // 创建一个场景
      scene = new THREE.Scene();
      // scene.background = new THREE.Color("#ff0000");
      // 创建几何体
      // console.log(window.innerWidth)
      var geometry = new THREE.SphereGeometry(42, 75, 75);
      // 纹理加载器 （ 此处加载贴图 ）
      var texture = new THREE.TextureLoader().load(
        "/src/utils/DuckCM.png"
      );
      // 几何体材质对象
      var material = new THREE.MeshLambertMaterial({
        map: texture,
        color: 0xffffffff,
      });
      // 创建网格模型对象
      mesh = new THREE.Mesh(geometry, material);
      //设置几何体位置
      mesh.position.x = 0;
      mesh.position.y = -5;
      mesh.position.z = 0;
      mesh.rotation.y += 0;
      scene.add(mesh);

      // 创建点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(50, 300, 50);
      this.point = point;
      scene.add(point);

      const sphereSize = 10;
      const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);
      scene.add(pointLightHelper);

      //创建环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      // 创建一个相机
      camera = new THREE.PerspectiveCamera(
        65,
        window.innerWidth / window.innerHeight,
        2,
        1000
      );
      camera.position.set(-50, 70, 100);
      camera.lookAt(0, 0, 0);
      camera.updateProjectionMatrix();
      // // 坐标轴辅助器，X,Y,Z长度30
      // var axes = new THREE.AxesHelper(300);
      // scene.add(axes);
      // // 辅助网格
      // let gridHelper = new THREE.GridHelper(100, 100);
      // scene.add(gridHelper);

      // 创建渲染器
      renderer = new THREE.WebGLRenderer({
        alpha: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xb9d3ff, 0.1);
      //插入 dom 元素
      // content.appendChild(renderer.domElement);
      //   console.log("1111", OrbitControls);
      // this.controls = new OrbitControls(camera, renderer.domElement);
      // this.controls = new MapControls(camera, renderer.domElement);
      this.controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      this.controls.enableZoom = false; //禁止缩放
      // this.controls.enableRotate = false; //禁止旋转
      this.controls.enablePan = false; //禁止平移
      this.render();
      this.controls.addEventListener("resize", this.render, false);
    },
    render() {
      renderer.render(scene, camera);
      // 自动旋转动画
      mesh.rotateY();
      requestAnimationFrame(this.render);
    },
  },
};
</script>

<style scoped>
.map-container {
  position: relative;
}

#container {
  width: 100%;
  height: 100%;
}

#container {
  position: absolute;
  height: 100%;
  min-width: 1200px;
  max-width: 2300px;
  overflow: hidden;
}
</style>
